<template>
  <a-drawer
    :width="500"
    :visible="visible"
    unmountOnClose
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 基础信息 </template>
    <div v-for="(item, index) in showData" :key="item.subCode">
      <p>{{ item.cnName }}</p>
      <a-table
        :pagination="false"
        :data="item?.subRelDetail || []"
        :draggable="{ type: 'handle', width: 40 }"
        @change="($event:any) => handleChange($event, index)"
        stripe
      >
        <template #columns>
          <a-table-column align="center" :width="200">
            <template #title> 字段名称 </template>
            <template #cell="{ record }">
              <span>
                {{ record.ctlCnName }}
              </span>
            </template>
          </a-table-column>
          <a-table-column align="center" :width="80">
            <template #title> 是否显示 </template>

            <template #cell="{ record }">
              <a-checkbox
                @change="(e:boolean) => changeHead(e as boolean, record)"
                v-model="record.show"
              ></a-checkbox>
            </template>
          </a-table-column>
          <!-- <a-table-column align="center" :width="80">
            <template #title> 是否必填 </template>
            <template #cell="{ record }">
              <a-checkbox v-model="record.required"></a-checkbox>
            </template>
          </a-table-column> -->
        </template>
      </a-table>
    </div>
  </a-drawer>
</template>
<script setup lang="ts">
import {
  PostPeropleTemplate,
  PutPeropleTemplate,
  PostPeropleTemplateone
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
import clonedeep from 'lodash.clonedeep';
const props = withDefaults(
  //参数说明
  defineProps<{
    visible: boolean;
    data: any;
    refresh?: any;
  }>(),
  { visible: false }
);
const emit = defineEmits(['update:visible']);
watch(props.data, (val) => {
  let oneLevel = 0;
  let twoLevel = 0;
  showData.value = clonedeep(val);
  showData.value?.forEach((ele: any, one: any) => {
    ele?.subRelDetail?.forEach((item: any, two: any) => {
      if (item.ctlCode === 'CE0931B76572747B3AFADAC56BB28DD41') {
        oneLevel = one;
        twoLevel = two;
      }
      item.required === 1 ? (item.required = true) : (item.required = false);
    });
  });
  showData.value[oneLevel]?.subRelDetail?.splice(twoLevel, 1);
});

const showData = ref();
const handleOk = async () => {
  if (!showData.value[0]?.subRelDetail[0]?.id) {
    showData.value.forEach(async (ele: any) => {
      ele.name = ele.cnName;
      ele.code = ele.subCode;
      ele?.subRelDetail?.forEach((item: any) => {
        item.required ? (item.required = 1) : (item.required = 2);
        item.show ? (item.show = 1) : (item.show = 2);
      });
      ele.controls = ele?.subRelDetail;
      await PostPeropleTemplate(ele);
    });
  } else {
    pending.forEach(async (ele) => {
      if (!ele.id) {
        await PostPeropleTemplateone(ele);
        return;
      }
    });
    await PutPeropleTemplate({ controls: pending });
  }

  pendingId.length = 0;
  pending.length = 0;
  props.refresh();
  emit('update:visible', false);
};
const handleCancel = () => {
  pendingId.length = 0;
  pending.length = 0;
  emit('update:visible', false);
};
// 存储待处理请求参数
const pending: {
  id?: number;
  show?: number;
  code: string;
  controlId: number;
}[] = reactive([]);
const pendingId: number[] = reactive([]);
// 存储待处理请求参数函数
const changeHead = (event: boolean, data: any) => {
  if (pendingId.indexOf(data.id) === -1) {
    const newData = clonedeep(data);
    pendingId.push(newData.id);
    delete newData.required;
    newData.show = event ? 1 : 2;
    pending.push(newData);
  }
};
// 表格排序a
const handleChange = async (_data: any, index: number) => {
  const newData: any = [];
  _data.forEach((ele: any, index: number) => {
    ele.order = index + 1;
  });
  _data.forEach((ele: any) => {
    const { id, order } = ele;
    newData.push({ id, order });
  });
  showData.value[index].subRelDetail = _data;
  await PutPeropleTemplate({ controls: newData });
};
</script>
